<template>
  <div class="d-flex flex-column mt-3">
    <div class="d-flex align-items-center">
      <img style="width: 200px" class="mr-2" :src="bookInfo.imgUrl" alt="" />
      <div>
        <div class="card" style="width: 100%">
          <div class="card-body">
            <h5 class="card-title">{{ bookInfo.title }}</h5>
            <p class="card-text">
              {{ bookInfo.slogan }}
            </p>
            <p class="card-text">
              作者：{{ bookInfo.author }}&nbsp;&nbsp;&nbsp;&nbsp;出版社：{{
                bookInfo.bookConcern
              }}&nbsp;&nbsp;&nbsp;&nbsp;出版日期：{{ bookInfo.publishDate }}
            </p>
            <span style="color: #e33100"
              >￥{{ realPrice(bookInfo) }} [{{
                parseFloat(bookInfo.discount * 10).toFixed(2)
              }}折]</span
            >
            <span style="color: grey; font-size: 12px; margin-top: 5px"
              >&nbsp; [定价<del>{{ parseFloat(bookInfo.price).toFixed(2) }}</del
              >]</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex align-self-center mt-2">
      <input
        type="number"
        autofocus
        style="width: 70px"
        min="0"
        max="999"
        class="form-control"
        v-model="bookQuantity"
      />
      <button @click="addCart" class="btn btn-danger ml-2" style="width: 120px">
        加入购物车
      </button>
    </div>
    <div class="d-flex flex-column mt-3">
      <div class="btn-group" style="width: 300px">
        <button @click="toggle(1)" type="button" class="btn btn-secondary">
          图书介绍
        </button>
        <button @click="toggle(2)" type="button" class="btn btn-secondary">
          图书评价
        </button>
        <button @click="toggle(3)" type="button" class="btn btn-secondary">
          图书文档
        </button>
      </div>
      <div class="border" style="margin-top: 10px; padding: 20px 10px">
        <div v-cloak>
          <div v-show="currentType == 1">
            {{ detail }}
          </div>
        </div>

        <div v-cloak>
          <div v-show="currentType == 2">
            <ul class="list-group list-group-flush">
              <li
                class="list-group-item"
                v-for="item in commentList"
                :key="item.id"
              >
                {{ item.content }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      // 图书
      bookInfo: {},
      // GET传过来的图书ID
      bookId: 0,
      // 图书介绍
      detail: "",
      // 当前切换框下标
      currentType: 1,
      // 评论列表
      commentList: [],
      // 数量
      bookQuantity: 1,
    };
  },
  methods: {
    realPrice(item) {
      return parseFloat(item.price * item.discount).toFixed(2);
    },
    toggle(type) {
      this.currentType = type;
      switch (type) {
        case 1:
          this.detail = this.bookInfo.detail;
          break;
        case 2:
          this.axios.get(`/api/book/${this.bookId}/comment`).then((res) => {
            if (res.data.length == 0) {
              this.detail = "此书暂无评价";
              this.currentType = 1;
            } else {
              this.commentList = res.data;
            }
          });
          break;
        case 3:
          this.detail = "此书暂无问答";
          this.currentType = 1;
          break;
        default:
          this.detail = "";
      }
    },
    addCart() {
      let newItem = { ...this.bookInfo };
      newItem.quantity = parseInt(this.bookQuantity);
      newItem.price = this.realPrice(this.bookInfo);
      this.pushCarList({ ...newItem });
    },
    ...mapMutations(["pushCarList"]),
  },
  created() {
    let id = this.$route.params.id;
    this.bookId = id;
    // 原
    // this.axios.get("/api/book/" + id).then((res) => {
    //   console.log(res);
    //   this.bookInfo = res.data;
    //   this.toggle(1);
    //   document.title = res.data.title;
    // });

    this.axios.get("/api/book/one?id=" + id).then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        this.bookInfo = res.data.data;
        this.toggle(1);
        document.title = res.data.data.title;
      }
    });
  },
};
</script>
<style>
[v-cloak] {
  display: none !important;
}
</style>
